<template>
  <div class="app-container">
    <!--搜索面板-->
    <div class="filter-container">
      <el-form :model="searchForm" status-icon ref="searchForm" label-width="80px">
        <el-row :gutter="10">
          <el-col :sm='6'>
            <el-form-item label="角色名称" prop="name">
              <el-input v-model.trim="searchForm.name" placeholder="请输入角色名称" clearable
                        @keyup.enter.native="handleFilter"/>
            </el-form-item>
          </el-col>
          <el-col :sm="6">
            <el-form-item label="角色标识" prop="role">
              <el-input v-model.trim="searchForm.role" placeholder="请输入角色标识" clearable
                        @keyup.enter.native="handleFilter"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label-width="20px">
              <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
              <el-button v-waves icon="el-icon-refresh" @click="handleReset">重置</el-button>
              <el-button v-waves type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
              <!--              <el-button v-waves type="success" icon="el-icon-plus" @click="handleEdit()">新增</el-button>-->
              <el-button v-waves type="danger" icon="el-icon-delete" @click="handleDelete()">批量删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--搜索面板-->
    <div class="containtable">
      <PageTable class="containtable" :query-method="rolePage" :query-form="searchForm" ref="pageTable">
        <el-table-column label="角色名称" align="center" property="name"/>
        <el-table-column label="角色标识" align="center" property="role"/>
        <el-table-column label="更新时间" align="center" property="modifyDate"/>
        <el-table-column label="创建时间" align="center" property="createDate"/>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-remove" @click="handleDelete(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </PageTable>
      <!--表格-->
    </div>

    <!--新增-->
    <el-dialog id="editForm" title="添加角色" :center="true" :visible.sync="editForm.show">
      <el-form status-icon :model="editForm" :rules="editForm.rules" ref="editForm" style="margin: 0 auto;"
               label-position="right" label-width="80px">
        <el-row :gutter="100">
          <el-col :lg="24">
            <el-form-item label="角色名称" prop="name">
              <el-input type="text" v-model="editForm.name" placeholder="请输入角色名称" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="100">
          <el-col :lg="24">
            <el-form-item label="角色标识" prop="role">
              <el-input type="text" v-model="editForm.role" placeholder="请输入角色标识" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="100">
          <el-col :lg="24">
            <el-form-item label="菜单" prop="value">
              <treeselect style="line-height: 26px"
                          :multiple="true"
                          :options="editForm.options"
                          :flat="true"
                          :default-expand-level="1"
                          placeholder="请选择菜单"
                          v-model="editForm.value"
              >
                <div slot="value-label" slot-scope="{ node }">{{ node.raw.name }}</div>
                <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }"
                       :class="labelClassName">
                  {{ node.raw.name }}
                </label>
              </treeselect>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-waves @click="onSubmit('editForm')" icon="el-icon-success">提交</el-button>
      </div>
    </el-dialog>
    <!--新增-->
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {rolePage, roleDetail, checkRoleIdent, rolEdit, roleDel, resourceTree} from '@/api/admin/system/role' //调用模块接口
import waves from '@/directive/waves' // Waves directive
import PageTable from "@/components/Pagination/PageTable";
export default {
  name: 'roleManage',
  components: {
    PageTable,
    Treeselect
  },
  directives: {
    waves
  },
  data() {
    var checkRole = (rule, value, callback) => {
      this.checkUserRole(rule, value, callback);
    }

    return {
      rolePage,
      searchForm: {
        name: '',
        role: '',
      },
      editForm: {
        show: false,
        name: '',
        id: '',
        role: '',
        nowrole: '',
        options: [],
        value: [],
        rules: {
          role: [{
            validator: checkRole,
            required: true,
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }],
          value: [{
            required: true,
            message: '请输入菜单',
            trigger: 'blur'
          }]
        },
      },
    }
  },
  methods: {
    handleFilter() {
      this.$refs.pageTable.reset();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.$refs.pageTable.reset();
    },
    //新增
    handleAdd() {
      this.editForm.id = '';
      this.editForm.show = true;
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate();
        this.$refs.editForm.resetFields();
      });
    },
    //修改
    handleUpdate(row) {
      this.handleRoleDetail(row.id);
      this.editForm.id = row.id;
      this.editForm.show = true;
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate();
      });
    },
    //详情
    handleRoleDetail(id) {
      roleDetail({
        id: id
      }).then(res => {
        this.editForm.name = res.data.role.name;
        this.editForm.role = res.data.role.role;
        this.editForm.nowrole = res.data.role.role;
        this.editForm.value = res.data.resourcesIds;
      });
    },
    //资源树
    getResourceTree() {
      resourceTree({}).then(res => {
        if (res.success) {
          this.editForm.options = res.data.trees;
        }
      });
    },
    //检查角色标识是否重复
    checkUserRole(rule, value, callback) {
      if (this.editForm.role == '') {
        return callback(new Error('请输入权限标识'));
      }
      if (this.editForm.role == this.editForm.nowrole && this.editForm.role != '') {
        callback();
      }
      checkRoleIdent({
        id: this.editForm.id,
        role: this.editForm.role
      }).then(res => {
        if (res.success) {
          if (res.data.exist) {
            return callback(new Error('当前用户名已存在'));
          } else {
            callback();
          }
        }
      });
    },
    //提交表单
    onSubmit(editForm) {
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          rolEdit({
            id: this.editForm.id,
            name: this.editForm.name,
            role: this.editForm.role,
            resourceIds: this.editForm.value.join(',')
          }).then(res => {
            this.$notify({
              title: '提示',
              message: '信息提交成功',
              type: 'success'
            });
            this.$refs.pageTable.refresh();
            this.editForm.show = false;
          });
        } else {
          return false;
        }
      });
    },
    //删除角色
    handleDelete(id) {
      if (!id) {
        id = this.$refs.pageTable.selects.map(item => item.id).join(',')
      }
      if (!id) {
        this.$message({
          type: 'error',
          message: '请选择要操作的记录!'
        });
        return;
      }
      this.$confirm('是否删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        roleDel({
          ids: id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$refs.pageTable.refresh();
        })
      })
    }
  },
  mounted() {
    this.$refs.pageTable.refresh();
    this.getResourceTree();
  }
}
</script>

<style>

</style>
